<template>
	<view class="order-item">
		<image class="iconfont urgency" src="/static/image/urgency.png" v-if="dataInfo.urgent === 1"></image>
		<view class="order-item__name" style="justify-content: space-between;">
			<view class="h_L" style="display: flex;align-items: center;">
				{{dataInfo.customername}}
				<view class="order-item__tel" @tap="makePhoneCall(dataInfo.customerphone)">{{dataInfo.customerphone}}</view>
			</view>
			<view class="h_copy" @tap.stop="copyClick">复制</view>
		</view>
		<view class="order-item__fault">{{dataInfo.mtype}}</view>
		
		<view class="order-item__addr"
			@tap.stop="openMap({
				lat: dataInfo.navigation_lat,
				lng: dataInfo.navigation_lng,
				title: dataInfo.address
			})"
			@longpress="copyText(dataInfo.address)"
		>
			{{dataInfo.address}}
			<view class="order-item__addr--juli">{{dataInfo.distance_text}}</view>
		</view>
		<view class="order-item__tag">
			<nt-tag :text="dataInfo.utype"></nt-tag>
			<nt-tag :text="dataInfo.ctype"></nt-tag>
			<nt-tag :text="dataInfo.mtype" color="#fff" bgColor="var(--theme-color)"></nt-tag>
			<nt-tag :text="dataInfo.urgent_text" v-if="dataInfo.urgent === 1" bg-color="#f00" color="#fff"></nt-tag>
		</view>
		<view class="order-item__remarks">
			<view class="order-item__remarks--label">订单状态：</view>
			<view class="order-item__remarks--content_red">{{dataInfo.status_text}}</view>
		</view>
		<view class="order-item__remarks">
			<view class="order-item__remarks--label">备注信息：</view>
			<view class="order-item__remarks--content">{{dataInfo.remarks}}</view>
		</view>
		<view class="order-item__remarks" v-if="dataInfo.appointmenttime">
			<view class="order-item__remarks--label">预约内容：</view>
			<view class="order-item__remarks--content">{{dataInfo.appointmenttime}}</view>
		</view>
		<view class="order-item__remarks" v-for="it in dataInfo.returnOrderStatusList" :key="it.id">
			<view class="order-item__remarks--label">{{it.is_type}}：</view>
			<view class="order-item__remarks--content_red">{{it.status_text}}</view>
		</view>
		<view class="order-item__footer">
			<!-- <view class="order-item__footer--btn primary" @tap="" v-if="dataInfo.is_submit == 0">完成</view> -->
			<view 
				class="order-item__footer--btn primary"
				@tap="nav(`/subpackage/order/pages/submit/_id?id=${dataInfo.id}`)" 
				v-if="dataInfo.is_submit == 0 && dataInfo.powerStatus && dataInfo.powerStatus.postSubmitDetails === 1"
			>
				{{ dataInfo.is_submit == 0 ? '详情提交' : '修改详情'}}
			</view>
			
			<view 
				class="order-item__footer--btn default" 
				@tap="nav(`/subpackage/order/pages/complete/index?id=${dataInfo.id}`)" 
				v-if="dataInfo.powerStatus && dataInfo.powerStatus.postComplete === 1"
			>完成</view>
		<!-- 	<view 
				class="order-item__footer--btn default" 
				@tap="toDetail"
				v-if="dataInfo.powerStatus.postSubmitDetails === 1"
			>修改详情</view> -->
			<view class="order-item__footer--btn default" @tap="toDetail">查看详情</view>
			<view class="order-item__footer--btn default" @tap="nav(`/subpackage/order/pages/payment/signing?id=${dataInfo.id}`)" v-if="dataInfo.nav_status_text === 7">签单修改</view>
			<view class="order-item__footer--btn default" @tap="applyOvertime" v-if="dataInfo.powerStatus && dataInfo.powerStatus.postApplyOvertime === 1 && dataInfo.nav_status_text == 6">申请加班</view>
			<view class="order-item__footer--btn default" @tap="show = true">更多操作</view>
		</view>
		<nt-order-more :show="show" @close="show = $event" :auth="dataInfo.powerStatus" :id="dataInfo.id" :is_submit="dataInfo.is_submit" @refresh="$emit('refresh')"></nt-order-more>
	</view>
</template>

<script>
import { applyBringBack, completeOrder } from "@/api"
import { mapGetters } from "vuex"
import { cache } from '@/utils'
export default {
	props: {
		data: {
			type: Object,
			default: ()=>{}
		},
	},
	data(){
		return {
			loading: false,
			show: false,
			dataInfo: {}
		}
	},
	computed: {
		...mapGetters(["userInfo"])
	},
	watch:{
		data: {
			handler(nv, ov){
				const info = JSON.stringify(nv)
				if(info === "{}" || !nv.id){
					uniCloud.callFunction({
						name: "undefinedMonitor",
						data: {
							userId: this.userInfo.id,
							cacheData: JSON.stringify(cache.get.staging()),
							currentRow: info
						}
					}).then(res => {
						console.log(res, 'undefinedMonitor执行成功')
					})
					return
				}
				this.dataInfo = nv
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		toDetail() {
			const { id, nav_status_text } = this.data;
			if([1, 2].includes(nav_status_text)){
				this.nav(`/subpackage/order/pages/detail?id=${id}`)
				return;
			}
			this.nav(`/subpackage/order/pages/_id?id=${id}`)
		},
		applyOvertime(){
			this.nav(`/subpackage/order/pages/submit/form?id=${this.data.id}&mode=overtime`)
		},
		
		copyClick(){
			let name = this.data.customername
			let phone = this.data.customerphone
			let address = this.data.address
			let copyData = name+' '+phone+' '+address
			uni.setClipboardData({
				data: copyData,
				success: function () {
					uni.showToast({
						icon: 'none',
						title: '复制成功',
					})
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
	.h_copy{
		background: var(--theme-color);
		color:#fff;
		font-size: 24rpx;
		display: inline-block;
		padding: 0 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 4rpx;
		z-index:3;
		// margin-left: 20rpx;
	}
.order-item{
	border-radius: 10rpx;
	background:#fff;
	padding: 20rpx 20rpx 0;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	position: relative;
	.urgency{
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		z-index:1
	}
	&__name{
		display:flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		color:#333;
	}
	&__tel{
		margin-left: 10rpx;
		color: red
	}
	&__fault, &__addr{
		font-size: 30rpx;
		color:#666;
		margin: 15rpx 0;
	}
	&__tag{
		display:flex;
		align-items: center;
		/deep/.nt-tag{
			margin-right: 10rpx;
		}
	}
	&__addr{
		display:flex;
		align-items: center;
		justify-content: space-between;
		color:#333;
		font-weight: bold;
		&--juli{
			color: #ffca0a;
			font-weight: normal;
		}
	}
	&__remarks{
		display:flex;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 26rpx;
		margin: 15rpx 0;
		&--label{
			color: #666;
			white-space: nowrap;
			font-weight: bold;
		}
		&--content{
			flex:1;
			color: #333;
			&_red{
				color: #FF1E10;
			}
			&_blue{color: #2d7ffd;}
		}
	}
	&__footer{
		display:flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		border-top: 1rpx solid #f5f5f5;
		&--btn{
			padding: 0 20rpx;
			border-radius: 6rpx;
			border-style: solid;
			border-width: 1rpx;
			text-align: center;
			min-width: 90rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			height: 70rpx;
			line-height: 68rpx;
			&.default{
				border-color: #333;
				color: #333;
			}
			&.primary{
				background: var(--theme-color);
				color:#fff;
				border-color: var(--theme-color)
			}
		}
	}
	&__more{
		display:flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 20rpx;
		/deep/ .u-button{
			width: 24%;
			
		}
	}
}
</style>